<template>
  <div class="settings-page animate-in">
    <h2>系统设置</h2>
    <el-form label-width="80px" style="margin-top:20px;max-width:400px;">
      <el-form-item label="站点名称">
        <el-input v-model="siteName" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const siteName = ref('后台管理系统')
</script>

<style scoped>
.settings-page {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-in {
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
